<template>
  <div style="margin: 5px 25px">
    <div style="padding: 5px">
      <el-text class="mx-1" style="margin: 0 15px">部门：</el-text>
      <el-select
        v-model="selectedDepartmentName"
        placeholder="请选择部门名称"
        style="width: 200px"
      >
        <el-option
          v-for="(item, index) in DepartmentNameOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-text class="mx-1" style="margin: 0 15px">类型：</el-text>
      <el-select
        v-model="selectedType"
        placeholder="请选择类型"
        style="width: 200px"
      >
        <el-option
          v-for="(item, index) in TypeOptions"
          :key="index" 
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" plain style="margin: 0 15px">查询</el-button>
      <!-- <el-button type="primary" plain style="margin: 0 15px">重置</el-button> -->
    </div>

    <div style="padding: 5px">
      <span style="margin-top: 20px; margin-left: 15px">
        { 潮位 } 警戒值：<el-input
          v-model="WarnInput"
          style="width: 240px"
          :disabled="!isEditing"
          placeholder="Please input"
        />
      </span>
      <span style="margin-top: 20px; margin-left: 15px">
        <el-button
          v-if="!isEditing"
          type="primary"
          @click="changeNum"
          style="margin-left: 15px"
          >更改</el-button
        >
        <el-button
          v-else
          type="warning"
          @click="okEditing"
          style="margin-left: 15px"
          >确定</el-button
        >
        <el-button type="primary" style="margin-left: 15px">保存</el-button>
      </span>
    </div>
    <div>
      <div ref="chartRef" style="width: 900px; height: 500px"></div>
    </div>

    <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="潮位警戒值" name="first">
        <div>
          <!== <TideWarn></TideWarn> ==>
        </div>
      </el-tab-pane>
      <el-tab-pane label="浪高警戒值" name="second">
        <!== <WaveWarn></WaveWarn> ==>
      </el-tab-pane>
    </el-tabs> -->
  </div>
</template>

<script setup>
import TideWarn from "./TideWarn.vue";
import WaveWarn from "./WaveWarn.vue";
import * as echarts from "echarts";
import { onMounted, ref, onUnmounted, nextTick } from "vue";
import { getTideMonth, getTide24, getWarning } from "../../network/net.js";
import { formatTime } from "../../utils/cTime.js";
let bm = sessionStorage.getItem("bm");
let bmInfo = sessionStorage.getItem("bmInfo");



const TypeOptions = [
  {
    value: "潮位警报值",
    label: "潮位警报值",
  },
  {
    value: "浪高警报值",
    label: "浪高警报值",
  },
];
const activeName = ref("first");
const chartRef = ref(null);
const WarnInput = ref();
const isEditing = ref(false);
const chartInstance = ref(null);

// const initChart = () => {
//   const chart = echarts.init(chartRef.value);
//   const option = {
//     tooltip: {
//       trigger: "axis",
//     },
//     legend: {},
//     toolbox: {
//       show: true,
//       feature: {
//         dataZoom: {
//           yAxisIndex: "none",
//         },
//         dataView: { readOnly: false },
//         magicType: { type: ["line", "bar"] },
//         restore: {},
//         saveAsImage: {},
//       },
//     },
//     xAxis: {
//       type: "category",
//       boundaryGap: false,
//       data: [
//         "0时",
//         "1时",
//         "2时",
//         "3时",
//         "4时",
//         "5时",
//         "6时",
//         "7时",
//         "8时",
//         "9时",
//         "10时",
//         "11时",
//         "12时",
//         "13时",
//         "14时",
//         "15时",
//         "16时",
//         "17时",
//         "18时",
//         "19时",
//         "20时",
//         "21时",
//         "22时",
//         "23时",
//       ],
//     },
//     yAxis: {
//       type: "value",
//       axisLabel: {
//         formatter: "{value} mm",
//       },
//     },
//     series: [
//       {
//         name: "Tide",
//         type: "line",
//         smooth: true,
//         data: [
//           395, 0, -370, -400, 100, 470, 130, -220, -380, -170, 350, 395, 0,
//           -370, -400, 100, 470, 130, -220, -380, -170, 350, 530, 210,
//         ],
//         markLine: {
//           data: [
//             {
//               yAxis: WarnInput.value,
//               lineStyle: {
//                 color: "red",
//               },
//             },
//           ],
//         },
//       },
//     ],
//   };
//   chart.setOption(option);
//   chartInstance.value = chart;
// };
// onMounted(() => {
//   initChart();
// });
window.addEventListener("resize", () => {
  if (chartInstance.value) {
    chartInstance.value.resize();
  }
});
// onUnmounted(() => {
//   window.removeEventListener("resize", () => chartInstance.value?.resize());
// });
const changeNum = () => {
  isEditing.value = true;
};
const okEditing = () => {
  // if (chartInstance.value) {
  //   // 更新图表中的 markLine 位置
  //   const newOption = {
  //     series: [
  //       {
  //         name: "Tide",
  //         smooth: true,
  //         markLine: {
  //           data: [
  //             {
  //               yAxis: WarnInput.value,
  //               lineStyle: {
  //                 color: "red",
  //               },
  //             },
  //           ],
  //         },
  //       },
  //     ],
  //   };
  //   chartInstance.value.setOption(newOption);
  // }
  // 退出编辑模式
  isEditing.value = false;
  warningValue = WarnInput.value;
  let option = chartDataObj.getOption();
  option.series[0].markLine.data[0].yAxis = warningValue;
  chartDataObj.setOption(option);
};
let token = sessionStorage.getItem("token");
const tableTideData = ref([]);
const getChDate = (date) => {
  // 返回格式07月01日 16时
  let month = date.slice(5, 7);
  let day = date.slice(8, 10);
  let hour = date.slice(11, 13);
  return month + "月" + day + "日 " + hour + "时";
};
let arr1 = [];
let timeArr1 = [];
let valueArr1 = [];
const getData = () => {
  getTide24(token).then((res) => {
    tableTideData.value = res.data.data.map((item) => {
      return {
        forecastTime: getChDate(formatTime(item.time)),
        tide: Math.round(item.tideValue * 100),
      };
    });
    res.data.data.forEach((item, index) => {
      timeArr1.push(getChDate(formatTime(item.time)));
      valueArr1.push(Math.round(item.tideValue * 100));
    });
    nextTick(() => {
      initChart(timeArr1, valueArr1);
      getWarningValue();
    });
  });
};
let warningValue = 410;
let chartDataObj = null;
const initChart = (xAxisData, seriesData) => {
  // chartRef.value
  // document.getElementById("tide_chart_container")
  chartDataObj = echarts.init(chartRef.value);
  let option = {
    grid: { top: "40", left: "40", bottom: "40", right: "40" },
    xAxis: {
      type: "category",
      data: xAxisData,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: seriesData,
        type: "line",
        smooth: true,
        markLine: {
          data: [
            {
              yAxis: warningValue,
              name: "Avg",
              lineStyle: { color: "#FF0000", width: 1 }, // 样式： 线型、颜色、线宽}] type: 'solid',
            },
          ],
        },
      },
    ],
  };
  chartDataObj.setOption(option);
};
const getWarningValue = () => {
  // 获取警戒值
  getWarning().then((res) => {
    WarnInput.value = res.data.data.value;
    warningValue = res.data.data.value;
    let option = chartDataObj.getOption();
    option.series[0].markLine.data[0].yAxis = warningValue;
    chartDataObj.setOption(option);
  });
};

onMounted(() => {
  nextTick(() => {
    getData();
  });
});
</script>
<style lang="less" scoped>
.search {
  width: 90vw;
  height: 6vh;
  background-color: #00000000;
  margin-left: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  align-content: center;
  text-align: center;
}
</style>
